<template>
    <div class="timing">
      <el-row style="margin-bottom:10px;">
        <el-col :span="24">
          <el-form :inline="true" :model="formInline" class="demo-form-inline queryFrom">
            <el-form-item label="主编码名称">
              <el-input v-model="formInline.codeMain" clearable placeholder="" />
            </el-form-item>
            <el-form-item>
              <el-button plain @click="getUserList"><Icon type="ios-search" />查询</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <!-- 按钮 -->
      <el-row style="margin-bottom:10px;">
        <el-col :span="24">
          <el-button type="primary" @click="addUser('add')"><Icon type="md-add" />新 增</el-button>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <testhttb ref="httbRef" @deleteSelectData="deleteSelectData" :table-col="tabUserList" :table-data="tableUserData" @refresh="getUserList" />
      <!-- 分页 -->
      <div style="text-align:right;margin-top:10px;">
        <el-pagination
          :current-page="page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
  
      <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="dialogTableVisible">
        <el-form v-if="dialogTableVisible" ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm autoClass">
          <el-form-item label="主编码" prop="codeMain">
            <el-input v-model="ruleForm['codeMain']" clearable placeholder="" />
          </el-form-item>
          <el-form-item label="主编码名称" prop="codeMainName">
            <el-input v-model="ruleForm['codeMainName']" clearable placeholder="" />
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="ruleForm['remark']" clearable placeholder="" />
          </el-form-item>
          <el-form-item label="状态" prop="state">
            <el-radio-group v-model="ruleForm['state']">
              <el-radio label="1">正常</el-radio>
              <el-radio label="0">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">{{ btnStr }}</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { codeMaininsert, codeMainupdate, codeMainpageList,codeMainremoves } from '@/api/home_/experiment'
  import experiment from '@/mixins/experiment'
  export default {
    components: {
    },
    mixins: [experiment],
    data() {
      return {
        title: '新增',
        rules: {},
        dialogTableVisible: false,
        ruleForm: {
          "codeMain": "",
          "codeMainId": "",
          "codeMainName": "",
          "createTime": "",
          "id": 0,
          "remark": "",
          "state": "",
          "updateTime": ""
        },
        userId: '',
        formInline: {
          codeMain: ''
        },
        tableUserData: [],
        tabUserList: [
          {
            key: 'codeMainName',
            title: '主编码名称'
          },
          {
            key: 'codeMain',
            title: '主编码'
          },
          {
            key: 'state',
            title: '状态'
          },
          {
            key: 'createTime',
            title: '创建时间'
          },
          {
            key: 'remark',
            title: '备注'
          }
        ],
        total: 0,
        size: 10,
        page: 1
      }
    },
    created() {
  
    },
    mounted() {
      this.$nextTick(() => {
        this.getUserList()
      })
    },
    methods: {
      deleteSelectData(v) {
        codeMainremoves({ ids: [v.codeMainId] }).then(res => {
          if (res.code == 200) {
            this.getUserList()
          } else {
            this.$notify.error({
              title: '错误',
              message: res.msg
            })
          }
        })
      },
      commitFromData() {
        if (this.ruleForm.hasOwnProperty('id')) {
          codeMainupdate(this.ruleForm).then(res => {
            if (res.code == 200) {
              this.dialogTableVisible = false
              this.getUserList()
            } else {
              this.errorDialog(res.msg)
            }
          })
        } else {
          codeMaininsert(this.ruleForm).then(res => {
            if (res.code == 200) {
              this.dialogTableVisible = false
              this.getUserList()
            } else {
              this.errorDialog(res.msg)
            }
          })
        }
      },
      handleSizeChange(v) {
        this.page = 1
        this.size = v
        this.getUserList()
      },
      handleCurrentChange(v) {
        this.page = v
        this.getUserList()
      },
  
      // 获取用户列表
      getUserList() {
        codeMainpageList({
          data: {
            'codeMainName': this.formInline.codeMain
          },
          'size': this.size,
          'current': this.page
        }).then(res => {
          this.tableUserData = res.data.records
          this.total = res.data.total
        })
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
    .el-select{
      width:100%;
    }
    .timing{
      background:#fff;
      padding:20px;
    }
    .autoClass{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    .el-form-item{
        width:50%;
    }
  }
  </style>
  